<template>
  <div class="add-container">
    <div class="form-container">
      <h2 style="text-align: center">FIXTURE NOTE</h2>
      <el-form :model="formParam" :rules="rules" ref="custForm">
        <div class="clearfix">
          <el-row class="header-title" justify="end">
            <el-col>
              <el-form-item label="Date" label-width="180px" style="float: right;">
                <span style="display: inline-block; width: 250px;border-bottom: 1px solid #000;">{{ formParam.fixtureDate }} </span>
              </el-form-item>
            </el-col>
       
            <el-col>
              <el-form-item label="No." label-width="180px" style="float: right;">
                <span style="display: inline-block; width: 250px;border-bottom: 1px solid #000;">{{ formParam.fixtureNo }}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <el-row>
          <el-col :span="1"> 
              <template #default>
                <span>1</span>
              </template> 
          </el-col>
          <el-col :span="4">
            <span class="title2"> CHARTERER  </span>
          </el-col>
          <el-col :span="19" class="content"> 
            <span class="underline">{{formParam.readinessCn}}{{ formParam.clientName }}</span> <br/> 
              ESTABLISHED UNDER {{ formParam.country }} （填写国家）NATIONAL LAW, 根据 {{ formParam.country }} 国家法律成立。 <br/> 
             REGISTRATION NUMBER登记注册号/统一社会信用代码： {{ formParam.registrationNumber }} <br/> 
              REGISTRATION ADDRESS： <span class="underline">{{ formParam.registrationAddress }}</span> <br/> 
              CONTACT PERSON联系人： <span class="underline">{{ formParam.contactPerson }}</span> <br/> 
               CONTACT NUMBER联系电话： <span class="underline">{{ formParam.contactNumber }}</span> <br/> 
               E-MAIL ADDRESS： <span class="underline">{{ formParam.email }}</span> <br/>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="1">

              <template #default>
                <span>2</span>
              </template>
          </el-col>
          <el-col :span="4">
           <span class="title2">OWNER </span>
          </el-col>
          <el-col :span="19"  class="content"> 
              <span class="underline">{{formParam.readinessCn}}{{ formParam.carrierName }}</span><br/>
              ESTABLISHED UNDER HONG KONG COMPANIES ORDINANCE. <br/>
              REGISTRATION NUMBER：	75520235<br/>
              REGISTRATION ADDRESS：	6/F.,Manulife Place,348 Kwun Tong Road,Kowloon,Hong Kong<br/>
              CONTACT PERSON：		FANG YA<br/>
              CONTACT NUMBER:		18205511001<br/>
              E-MAIL ADDRESS：		fangya@aiccshipping.com<br/> 
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="1">
              <template #default>
                <span>3</span>
              </template>
          </el-col>
          <el-col :span="4">
           <span class="title2"> VESSEL </span>
          </el-col>
          <el-col :span="19" class="content">
              MV <span class="underline">{{formParam.readinessCn}}{{ formParam.vesselName }}
              &nbsp; {{ formParam.voyageNo }}</span><br/>
              BUILT/YARD : 2023/WUHU<br />
              DWT/DRAFT : 18776.5/10m<br />
              FLAG : Marshall Islands <br />
              GRT/NRT : 71663M/T/21499M/T<br />
              LOA : 199.9m/ BREADTH:38M/ DEPTH:46M<br />
              OWNER’S GUARANTEE CARRYING VESSEL IS SUBJECT TO THE INTERNATIONAL SAFETY MANAGEMENT CODE (ISM) AND
              INTERNATIONAL SHIP AND PORT FACILITY SECURITY CODE (ISPS).<br />
              船东保证，所承运的船舶遵守《国际安全管理规则》（ISM）和《国际海上人命安全公约关于国际船舶和港口设施保安的规则》（ISPS）。
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="1">
              <template #default>
                <span>4</span>
              </template>
          </el-col>
          <el-col :span="4">
		     <span class="title2">  CARGO & READINESS<br />货物及货好时间 </span>
           
          </el-col>
          <el-col :span="19" class="content">
				   <span class="underline">
				   {{formParam.readiness}} </span>
                  <br />  <span class="underline">{{formParam.readinessCn}}
				  </span>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="1">
              <template #default>
                <span>5</span>
              </template>
          </el-col>
          <el-col :span="4">
		    <span class="title2">  DIMENSION SURVEY <br /> 尺寸测量 </span> 
          </el-col>
          <el-col :span="19" class="content">
              <span>
                CHARTERER SHALL GUARANTEE CONSISTENCY OF DECLARED DIMENSION AND SURVEY DIMENSION INCLUDING EXTERNAL
                ACCESSORIES. IN CASE SURVEY DIMENSION IS LAGER THAN DECLARED DIMENSION RESPECTIVELY, CHATERER SHALL PAY
                OCEAN FREIGHT BASED ON SURVERY DIMENSION UNLESS OTHERWISE APPROVED BY OWNER. ESPECIALLY FOR SURVEY
                DIMENSION LESS THAN DECLARED, CHARTERER SHALL PAY OCEAN FREIGHT BASED ON DECLARED DIMENSION
                RESPECTIVELY. OWNER SHALL APPOINT CARGO MEASUREMENT SUVEYOR. SURVEY FEE SHALL BE PAID BY OWNER.<br />
                租船方应保证所声明的尺寸与测量尺寸（包括外部附件）的一致性。若测量尺寸大于声明尺寸，租船方应基于测量尺寸支付海运运费，除非船东另有批准。特别是当测量尺寸小于声明尺寸时，租船方仍应基于声明尺寸支付海运运费。船东应指定货物测量测量师，测量费用应由船东承担。
              </span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="1">
              <template #default>
                <span>6</span>
              </template>
          </el-col>
          <el-col :span="4">
		    <span class="title2">  LOADING PORT<br />装货港 </span>
           
          </el-col>
          <el-col :span="19" class="content"> 
			   <span class="underline">
			    1个安全泊位{{formParam.pol}}   &nbsp;
			   </span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="1">
              <template #default>
                <span>7</span>
              </template>
          </el-col>
          <el-col :span="4">
		         <span class="title2"> LAYCAN<br />船期 </span> 
          </el-col>
          <el-col :span="4">
            <span class="underline">
            {{formParam.laycan}}&nbsp;
            </span> 
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="1">
              <template #default>
                <span>8</span>
              </template>
          </el-col>
          <el-col :span="4">
		    <span class="title2">  DISCHARGING PORT<br />卸货港 </span> 
          </el-col>
          <el-col :span="19" class="content">
			   <span class="underline">
			        1个安全泊位{{ formParam.pod }}&nbsp;
			   </span> 
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="1">
              <template #default>
                <span>9</span>
              </template>
          </el-col>
          <el-col :span="4">
		         <span class="title2"> TRANSSHIPMENT<br />中转 </span> 
          </el-col>
          <el-col :span="19" class="content"> 
             DIRECT CALL NO TRANSSHIPMENT <br/>
             直航，不允许中转         
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="1">
              <template #default>
                <span>10</span>
              </template>
          </el-col>
          <el-col :span="4">
            FREIGHT RATE<br />海运费费率
          </el-col>
          <el-col :span="19" class="content">
			   <span class="underline">
			    1个安全泊位{{formParam.freightRate}}   &nbsp;
			   </span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="1">
              <template #default>
                <span>11</span>
              </template>
          </el-col>
          <el-col :span="4">
		    <span class="title2">  FREIGHT PAYMENT<br />运费支付 </span>
           
          </el-col>
          <el-col :span="19" class="content">
              <div class="">
                <span>RELEVANT FREIGHT MUST BE PAID WITH IN </span>
			   <span class="underline12">
			     {{formParam.paymentDay}}   &nbsp;
			   </span>
                <span> BANKING DAYS AFTER THE CARGO ONBOARD DATE. IN CASE ALL FREIGHT REMAIN UNPAID TO OWNER BEFORE
                  CARGO RELEASE TO CONSIGNEE, OWNER SHALL HAVE A RIGHT TO HOLD CARGO WITHOUT RELEASING UNTIL CHATERER
                  PAY FULL FREIGHT TO OWNER.
                </span><br />
                <span>相关运费必须在货物装船日期后的
                  {{formParam.paymentDay}}个工作日内支付。如果货物放行前，租家未向船东支付全部运费，则船东有权扣留货物，直至租家向船东支付全额运费后才予以放行。</span>
              </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="1">
              <template #default>
                <span>12</span>
              </template>
          </el-col>
          <el-col :span="4">
		    <span class="title2"> TAXES / DUES<br />税费/杂费 </span>
            
          </el-col>
          <el-col :span="19" class="content">
              <span>ANY TAXES AND DUES ON CARGO AND/OR FREIGHT BE FOR CHARTERS’ ACCOUNT. ANY TAXES AND DUES ON VESSEL TO
                BE FOR OWNER’S ACCOUNT. </span>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="1">
              <template #default>
                <span>13</span>
              </template>
          </el-col>
          <el-col :span="4">
		    <span class="title2"> DETENTION <br />滞期费 </span>
            
          </el-col>
          <el-col :span="19" class="content">
              <div>
                 <span>NOR TO BE TENDERRED AT ANY TIME DAY OR NIGHT, SUNDAY&HOLIDAY INCLUDED, UPON VESSEL'S ARRIVAL AT THE
                PORT. CHARTERERS GUARANTEE THAT CARGO, DOCUMENTS AND GEARS SHALL BE READY UPON VESSEL'S ARRIVAL AT THE
                PORT. OTHERWISE, IF LOADING NOT TO BE COMMENCED 24 HOURS AFTER VESSEL’S ARRIVAL BECAUSE OF ABOVE
                MENTIONED REASONS, OWNERS SHALL HAVE THE RIGHT TO WITHDRAW VESSEL AND CLAIM RELEVANT LOSS. DETENTION
                APPLIES AT USD </span>
			  <span class="underline">
			     {{formParam.demurrage}}   &nbsp;
			   </span>

                <span> PER DAY PRO RATA., DETENTION TO BE PAID BY CHTRS WITHIN 5 BANKING DAYS AFTER
                PRESENTATION OF SUPPORTING DOCUMENTS BY OWNERS.<br />
                装卸准备就绪通知书在船舶抵港以后就会递交,无论白天和黑夜，包括节假日和星期天。租家保证船舶抵港时，货物、单证和装卸设备已备妥。否则，在船舶抵达装港24小时后，因为租家的上述原因仍不能进行装货作业，船东有权撤船，并索赔相关损失。滞期费按照{{formParam.demurrage}}美元每天按比例计算,在船东提交了有关的支持文件和记录之后，租船人应该在5个银行工作日之内支付滞期费。
              </span>
              </div>
             
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="1">
              <template #default>
                <span>14</span>
              </template>
          </el-col>
          <el-col :span="4">
		    <span class="title2">  DEADFREIGHT <br />亏舱费 </span>
           
          </el-col>
          <el-col :span="19" class="content">

              <span> IN CASE OF SHORT LOADING OR CANCELLATION, CHARTERERS ARE LIABLE TO PAY THE FULL FREIGHT AGAINST
                THE CONTRACTED QUANTITY WITHIN 7 WORKING DAYS UPON RECEIVING OWNERS DEBIT NOTE/INVOICE UNLESS OTHERWISE
                APPROVED BY OWNER.<br />
                在出现短装或取消装载的情况下，租家应在收到船东的借记通知单/发票后的7个工作日内，按照合同约定的数量支付全额运费，除非船东另有批准。
              </span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="1">
              <template #default>
                <span>15</span>
              </template>
          </el-col>
          <el-col :span="4">
		    <span class="title2">  AGENCY<br />代理 </span>
           
          </el-col>
          <el-col :span="19" class="content">
              OWNERS’ AGENTS AT BOTH ENDS.<br />
              装卸港代理由船东指定。
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="1">
              <template #default>
                <span>16</span>
              </template>
          </el-col>
          <el-col :span="4">
		    <span class="title2">  BILL OF LADING<br />提单 </span>
            
          </el-col>
          <el-col :span="19" class="content">
              <div>
                <span>BS/L CLAUSED 'FREIGHT PREPAID'IF NEEDED TO BE SIGNED AND RELEASED AFTER COMPLETION OF LOADING
                  UNDER STRAIGHT CONDITION OF FREIGHT FULLY COLLECTED BY OWNERS BANK. <br />
                  “运费预付”如需要，字样应显示在提单上，在装货结束并且船东收到全部运费以后签发。</span>
              </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="1">
              <template #default>
                <span>17</span>
              </template>
          </el-col>
          <el-col :span="4">
		   <span class="title2">  LOADING MATERIAL<br />装载物资 </span>
            
            
          </el-col>
          <el-col :span="19" class="content">
               <div class="">
                <span>LASHING / UNLASHING ON SHIP 
			  <span class="underline">
			     {{formParam.lashAccount}}   &nbsp;
			   </span>

                  ACCOUNT.<br />
                  （货物的）绑扎与解绑费用由{{ formParam.lashAccount=='OWNER’S'?'船东':'租船人' }}承担。 </span>
              </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="1">
              <template #default>
                <span>18</span>
              </template>
          </el-col>
          <el-col :span="4">
		  <span class="title2">  LOADING AND DISCHARGING CLAUSE <br />装卸条款 </span>
            
          </el-col>
          <el-col :span="19" class="content">
              <div class="">
                <span>LIGHTERAGE/LIGHTERING/SHORE CRANE/FLOATING CRANE/SHIFTING, IF ANY, SHALL BE FOR CHARTERERS’ TIME
                  AND ACCOUNT AT BENDS.<br />
                  如果在装卸港需要安排驳船/过驳/岸吊/浮吊/移泊，由租家承担时间和费用。 </span>
              </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="1">
              <template #default>
                <span>19</span>
              </template>
          </el-col>
          <el-col :span="4">
		    <span class="title2"> LAW AND ARBITRATION <br />法律和仲裁  </span>
            
          </el-col>
          <el-col :span="19" class="content">
              <div class="">
                <span>FOR SHIPMENTS WORLDWIDE THE CONTRACT EVIDENCED BY OR CONTAINED IN THIS FIXTURE SHALL BE GOVERNED
                  BY LAWS OF P.R.CHINA AND ALL CLAIMS AGAINST THE OWNER IN RESPECT OF THE GOODS OR ARISING OUT OF THE
                  CARRIAGE SHALL BE REFERRED TO CHINA MARITIME ARBITRATION FOR ARBITRATION.<br />
                  适用法律与管辖权：对于全球范围内的运输，本合同（由或包含在本租船合约中）应受中华人民共和国法律管辖。所有针对船东就货物或运输产生的索赔，应由中国海事仲裁委员会仲裁，仲裁地为上海。
                </span>
              </div>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="1">
              <template #default>
                <span>20</span>
              </template>
          </el-col>
          <el-col :span="4">
		    <span class="title2">  CONFIDENTIALITY <br />保密条款  </span>
           
          </el-col>
          <el-col :span="18" class="content">
              <div class="">
                <span>THIS FIXTURE INCLUDING BUT NOT LIMITED TO FREIGHT RATE TO BE KEPT STRICTLY PRIVATE AND
                  CONFIDENTIAL.<br />
                  本租船合约（包括但不限于运费率）必须严格保密，不得泄露。</span>
              </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="1">
              <template #default>
                <span>21</span>
              </template>
          </el-col>
          <el-col :span="4">
		  <span class="title2">  AGREEMENT PERIOD <br />协议期限 </span>
            
          </el-col>
          <el-col :span="19" class="content">
              <div class="">
                <span>THIS AGREEMENT SHALL BE EFFECTIVE FOR THIS VOYAGE ONLY.<br />
                  本协议仅对本航次有效。 </span>
              </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="1">
              <template #default>
                <span>22</span>
              </template>
          </el-col>
          <el-col :span="4">
		   <span class="title2">    CONFLICT CLAUSE <br />冲突条款 </span>
          
          </el-col>
          <el-col :span="19" class="content">
              <div class="">
                <span>IF THERE IS DISCREPANCY AND/OR CONFLICT BETWEEN THE TERMS OF THIS FIXTURE NOTE AND ANY OTHER TERMS
                  BETWEEN THE PARTIESIN RELATION TO THIS AGREEMENT (INCLUDING WITHOUT LIMITATION THE TERMS AND
                  CONDITIONS OF CARRIER'S STANDARD BILL OF LADINGAND/OR THE BOOKING NOTE, IF ANY), THE TERMS OF THIS
                  FIXTURE NOTE SHALL PREVAIL.<br />
                  如本租船合约条款与双方就本协议达成的任何其他条款（包括但不限于承运人的标准提单和/或订舱单（如有）的条款和条件）之间存在差异和/或冲突，则以本租船合约的条款为准。</span>
              </div>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="1">
              <template #default>
                <span>23</span>
              </template>
          </el-col>
          <el-col :span="4">
		    <span class="title2"> OTHER CLAUSES<br />其他条款  </span>
            
          </el-col>
          <el-col :span="19" class="content">
              <div class="">
                <span>OTHER TERMS AND CONDITIONS AS PER GENCON 2022 CP.<br />
                  其他条款和条件根据金康2022合同版本。 </span>
              </div>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="1">
              <template #default>
                <span>24</span>
              </template>
          </el-col>
          <el-col :span="4">
		    <span class="title2"> LANGUAGE PRECEDENCE CLAUSE <br />语言优先性条款  </span>
            
          </el-col>
          <el-col :span="19" class="content">
              <div class="">
                <span>IN CASE OF CONFLICT BETWEEN CHINESE LANGUAGE AND ENGLISH LANGUAGE, ENGLISH SHALL PREVAIL. <br />
                  如果协议中中文和英文在释义上有任何冲突， 则以英文为准。 </span>
              </div>
          </el-col>
        </el-row> 

        <el-row>
          <el-col :span="1">
              <template #default>
                <span>25</span>
              </template>
          </el-col>
          <el-col :span="4">
		    <span class="title2">  OWNER’S NOMINATED BANK ACCOUNT <br />船东指定银行账户 </span>
            
          </el-col>
          <el-col :span="19" class="content">
              <div class="bank-div" style="line-height:40px">
                <div><span class="form-label">&nbsp;BENEFICIARY: </span>
				 <span class="underline12">
			     {{formParam.beneficiary}}   &nbsp;
			     </span>
				 </div>
                 <div>
				 <span class="form-label">ADDRESS : </span>
				 <span class="underline12">
			     {{formParam.beneficiaryAddress}}   &nbsp;
			     </span>
				 </div>               
                <div><span class="form-label">SWIFT CODE: </span>
				 <span class="underline12">
			     {{formParam.swiftCode}}   &nbsp;
			     </span>
				</div>
                 <div><span class="form-label">BANK NAME: </span>
				
				 <span class="underline12">
			     {{formParam.bankName}}   &nbsp;
			     </span>
				 </div>
                <div>
				<span class="form-label">BANK ADDRESS : </span>
				<span class="underline12">
			     {{formParam.bankAddress}}   &nbsp;
			     </span>
				 </div>
                <div><span class="form-label">ACCOUNT NAME : </span  >
				<span class="underline12">
			     {{formParam.accountName}}   &nbsp;
			     </span></div>
                 <div><span class="form-label">US DOLLAR ACCOUNT NUMBER : </span>
				 <span class="underline12">
			     {{formParam.usAccountNo}}   &nbsp;
			     </span></div>
                <div><span class="form-label">ACCOUNT NO : </span>
				 <span class="underline12">
			     {{formParam.accountNo}}   &nbsp;
			     </span>
				</div>  
              </div>
          </el-col>
        </el-row>
         <el-row style="margin:20px 0;">
          <el-col :offset="1"  :lg="5" :xl="4" >Remarks</el-col>
          <el-col  :lg="18" :xl="19">
			<span class="underline12">
			     {{formParam.remark}}   &nbsp;
			     </span>

          </el-col> 
        </el-row>
        <el-row style="margin:20px 0;">
          <el-col :offset="1"  :lg="5" :xl="4" >Appendix</el-col>
          <el-col  :lg="18" :xl="19" class="content">
              <PreViewImageUpload :isTable="false" :needConfirm="true" :record="formParam" :photos="Array.isArray(formParam.appendix)?formParam.appendix:formParam.appendix?[formParam.appendix]:[]" :url="uploadUrl" :id="formParam?.fixtureId" @onSuccess="submitUploadForm" />
          </el-col> 
        </el-row> 

        <el-row style="margin-top: 20px;">
          <!-- <el-col :offset="1"  :span="22" style="margin-bottom: 30px;">END</el-col> -->
          <el-col :offset="1" :span="9">
            <p style="font-weight: bold;">CHARTERER</p>
            <p>{{formParam.clientName}}</p>
          </el-col>
          <el-col :offset="7" :span="6" style="text-align: center;">
            <p style="font-weight: bold;">OWNER</p>
            <p>AICC HONGKONG LIMITED</p>
          </el-col>
        </el-row>
      </el-form>
      <div class="dialog-footer">
          <el-button  type="warning"  plain  icon="Close"  @click="cancelForm" >Close</el-button> &nbsp;&nbsp;&nbsp;&nbsp;

      </div>

    </div>
  </div>
</template>
<script lang="ts" setup>  
  import moment from "moment";
  import { ref, onMounted, reactive, computed, watch, getCurrentInstance } from "vue";
  import { useRouter } from "vue-router";
  import service from "@/utils/request";
  import { ElMessage } from "element-plus";
  import PreViewImageUpload from '@/components/ImageUpload/PreViewImage.vue' 
  const { proxy } = getCurrentInstance();
  const route = useRoute();
  const router = useRouter();
  import { ElNotification, ElMessageBox } from "element-plus";
  const custForm = ref(null);
  const dialogTitle = ref("");
  const shippingTermsList = ref(['FLT, NET ', 'FIO, NET ', 'FILO, NET ', 'LIFO, NET ']) 
  const uploadUrl = 'shipping/fixtureNote/upload' 
  
  const initForm = {
    fixtureNo: null,
    clientName: null,
    carrierCode: null,
    carrierName: null,
    ownerAddress: "6/F.,Manulife Place,348 Kwun Tong Road,Kowloon,Hong Kong",
    vesselName: 'AICC HUANGHU',
    voyageNo: null,
    clientCode: null,
    contactName: null,
    pol: null,
    pod: null,
    country:"",
    paymentDay: null,
    ladingDay: null,
    contactPerson: null,
    contactNumber:null,
    email: null,
    laycanStart: null,
    readiness:"", 
    readinessCn:"",
    laycan:<any>null,
    laycanEnd: null, 
    terms: <any>[],
    units: null,
    cargoType: null,
    totalCbm: null,
    readyBy:"",
    readinessDate: null,
    shippingTerms: null,
    otherClauses: '',
    demurrage: 55000,
    lashAccount:"",
    fixtureDate: moment(new Date()).format('YYYY-MM-DD'),
    signed: null, 
    freightRate: "$  PER CBM FOR PASSENGERS, FLT, NET  <br/>海运费费率：乘用车每立方$ ，FLT，净价",
    //freightRates: <any>[],
    detentionDay: null,
    deadFreightDay: null,
    fixtureId: null, 
    beneficiary: null,
    beneficiaryAddress:"ROOM 1911.LEE GARDEN ONE.33 HYSAN AVENUE,CAUSEWAY BAY.HONG KONG",
    registrationAddress:null,
    registrationNumber: null,
    bankName:null,
    swiftCode:null,
    bankAddress:null,
    accountName:null,
    accountNo:null,
    usAccountNo:"FTN8110200193101910332",
    remark:null,
    appendix:null
};
 
const duesechecked = ref(false)

const terms = ref([1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 0, 0,1,1,1,1])

const formParam = reactive(Object.assign({ }, initForm));
const total = ref(0);
const statuss = ['UnApprove', "Approve", "Reject"]
//const initList = [{ brand: "", freightRate: null, shippingTerms: null }]
const rules = ref({
   pol: [{ required: true, message: "POL is required", trigger: "blur" }],
   pod: [{ required: true, message: "POD is required", trigger: "blur" }]
});

let vessels = reactive([])
let bankInfo = reactive({})
let voyages = reactive([])
let pols = reactive([])
let pods = reactive([])
const isLoading = ref(false);

const queryParams = reactive({
  pageNum: 1,
  pageSize: 20,
  vesselName: null,
  voyageNo: null,
  templateType:1,
  fullName: null,
  orderByColumn: undefined,
  isAsc: undefined,
});

const listData = ref([]);
const refreshTable = async () => {
  let result = await service.get("/shipping/fixtureNote/getTable", {params: queryParams });
  listData.value = result.data;
  total.value = result.total;
};

const dialogFormVisible = ref(false); 
let isAdd = false;
const recordData=ref()

watch(route,
 async () => {
        recordData.value = JSON.parse(localStorage.getItem('RECORD_DATA1')) 
        Object.keys(recordData.value).forEach(key => {
        formParam[key] = recordData.value[key]
      })
      if(!formParam.fixtureDate){
        formParam.fixtureDate = moment(new Date()).format('YYYY-MM-DD')
      }
      if(formParam.terms){
        duesechecked.value = Boolean(formParam.terms[12])
      }
      if(formParam.laycanStart){
        formParam.laycan = [formParam.laycanStart, formParam.laycanEnd]
      }
      let params={vesselName:formParam.vesselName, voyageNo:formParam.voyageNo,clientCode:formParam.clientCode} 
      if(formParam.readiness == null || formParam.readiness == ""){
        service.post("/shipping/fixtureNote/getAllFinishedByClient", params).then((result: any) => {
        formParam.readiness = ""
        formParam.readinessCn = ""
        if (result.data && result.data.readiness) {
          let readiness = result.data.readiness
          for (let i in readiness) {
            formParam.readiness += "ABOUT " + readiness[i].totalUnits + " UNITS OF " + readiness[i].brand + " , AROUND" + readiness[i].totalCbm + " CBM,CARGO TO BE READY BY ";
            // if (formParam.readyBy != null && formParam.readyBy != undefined) {
            //   formParam.readiness += formParam.readyBy
            // }
            formParam.readiness += "\n"
            formParam.readinessCn += "货物量约为" + readiness[i].totalUnits + "辆" + readiness[i].brand + ",货物需在" + " " + "（具体日期或时间点）前准备就绪";
            // if (formParam.readyBy != null && formParam.readyBy != undefined) {
            //   formParam.readinessCn += formParam.readyBy
            // }
            formParam.readinessCn += "\n" 
            //formParam.units = result.data.totalUnits  
            //formParam.totalCbm=result.data.totalCbm  
          }
        }
        else {
          formParam.readiness = "ABOUT  UNIT OF , AROUND CARGO TO BE READY BY ";
          formParam.readinessCn = "货物量约为 货物需在" + " " + "（具体日期或时间点）前准备就绪";
        }


      
        formParam.pol = result.data.pol
        formParam.pod = result.data.pod
      }).catch(
        (err: any) => {
          //formParam.freightRates = initList
          formParam.readiness = "ABOUT  UNIT OF , AROUND CARGO TO BE READY BY ";
          formParam.readinessCn = "货物量约为 货物需在" + " " + "（具体日期或时间点）前准备就绪";
          console.log(err, 'err')
        }
      ) 
    }else { 
      //formParam.freightRates = JSON.parse(formParam.freightRates)
    }
  }
     
  
  ,
   {immediate: true }
  )
const save = () => {
    //terms.value[12] = Number(duesechecked.value)
    formParam.terms = terms.value
    formParam.freightRates = JSON.stringify(formParam.freightRates)
    service.put("shipping/fixtureNote", formParam);
	  ElNotification.success({
      title: "Prompt information",
      message: "save successful!",
      position: "bottom-right",
    });
};



const submitForm = () => {
  // @ts-ignore
  custForm.value.validate(async (valid) => {
    if (!valid) {
      ElMessage.error("Verification failed!");
      return;
    }

	ElMessageBox.confirm("Confirm to Submit ？", "Submit  Information", {
		type: "warning",
		confirmButtonText: "Confirm",
		cancelButtonText: "Cancel",
	}).then(async () => {
	    terms.value[12] = Number(duesechecked.value)
		  formParam.terms = terms.value
      formParam.pod = formParam.pod.join(';')
      formParam.pol = formParam.pol.join(';')
		  await service[isAdd ? "post" : "put"]("shipping/fixtureNote", formParam);

		// @ts-ignore
		ElNotification.success({
		  title: "Prompt information",
		  message: "save successful!",
		  position: "bottom-right",
		});
		dialogFormVisible.value = false;
		cancelForm()
		refreshTable();

	});
 
  });
};


const cancelForm = () => {
  if (formParam.type == 1) {
    router.push({ path: "/freightForward/fixtureNote/list", query: { showForm: false }  });
  } else {
    router.push({ path: "/contract/fixtureNote", query: { showForm: false }  });
  }
};
   
 

const datePickChange = (value: any) => {
  formParam.laycanStart = moment(value[0]).format('YYYY-MM-DD')
  formParam.laycanEnd = moment(value[1]).format('YYYY-MM-DD')
}

// const addFreightRateItem = ()=>{
//   let tt=JSON.parse(JSON.stringify(initList));
//   formParam.freightRates.push(tt)
// }
// const deleteFreightRateItem = (item,index)=>{
//   formParam.freightRates.splice(index,1)
// }

 
// 上传成功更新数据
const submitUploadForm = async (data) => {
  formParam.appendix = data.url
};

let cargo_type = reactive([])
let shippingTermsNames = reactive([])
const fixturePolList = ref(null)
const fixturePodList = ref(null)
onMounted(async () => {
  let result = await service.get("/shipping/schedule/getAllSchedule");
  if (result) {
    vessels = result.data;
    voyages = (vessels.find(item => item.vesselName == 'AICC HUANGHU') || {schedules: [] }).schedules;
    fixturePodList.value=voyages.find(item=>item.voyageNo==formParam.voyageNo).pods
    fixturePolList.value=voyages.find(item=>item.voyageNo==formParam.voyageNo).pols
  }
  result = await service.get("/shipping/carrier/getCarrierByCode?carrierCode="+formParam.carrierCode);
  if (result) {
    bankInfo = result.data.bankInfo;
    formParam.bankName=bankInfo.bankName 
    formParam.swiftCode=bankInfo.swiftCode;
    formParam.bankAddress=bankInfo.bankAddress
    formParam.beneficiary=bankInfo.beneficiaryName;
    formParam.accountNo=bankInfo.accountNo;  
  }

  const res = await proxy.useDict("cargo_type", "freight_rate_term");
  cargo_type = res.cargo_type
  shippingTermsNames = res.freight_rate_term 
  
  refreshTable()
});
</script>
<style scoped lang="scss">
   .myitem{
       display:block!important;
   }

  .add-container {
    padding-top: 30px;
    background-color: #fafafa;
    min-height: 100%;
  }

  .form-container {
    margin: auto;
    padding: 40px;
    width: 90%;
    background-color: #fff;
  }

  .dialog-footer {
    margin: 60px auto 0;
    width: 100%;
    text-align: center;
  }

  .el-col>span {
    margin-left: 22px;
    line-height: 32px;
    font-size: 14px;
  }

  .flex-content .el-form-item__content {
    display: inline-block;
  }

  .el-checkbox {
    color: black;
  }

  .el-checkbox__label {
    margin-top: 2px;
  }

  .clearfix::after {
    content: "";
    display: block;
    clear: both;
    visibility: hidden;
  }

  ::v-deep(.el-form-item__label) {
    font-weight: 400 !important;
  }

  .header-title {
    width: 100%;
  }
  .bank-div{
    div{
      width: 100%;

    }
  }
  .form-label{
    display: inline-block;
    width: 30%;
    font-size: 14px;
    text-align: left;
  }
  .underline{
      border-bottom: 1px solid #000; padding:0px 35px;font-size:14px;margin-left:0!important
  }
  
  .underline12{
      border-bottom: 1px solid #000; padding:0px 35px;font-size:12px;
  }
  .content{
     margin:0 0 20px 0;
     font-size:14px;
	 line-height:32px;
  }
  .content span{
     margin-left:0
  }
  
   .title2{
     margin-left:0!important
  } 
</style>